<template>
 <client-only>

   <span v-html="iconContent" class="icon-container" :style="{ 'width': size+'px', 'height': size+'px' }">

   </span>

 </client-only>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: String,
    default: '16'
  },
  color: {
    type: String,
    default: 'currentColor'
  }
})

const iconContent = computed(() => {
  const { $icons } = useNuxtApp()
  const svg = $icons.get(props.name)
  if (!svg) {
    console.warn(`Icon "${props.name}" not found`)
    return ''
  }

  if (props.color !== 'currentColor') {
    return svg.replace(/<svg/, `<svg fill="${props.color}"  width="${props.size}" height="${props.size}"`)
  }
  return svg
})
</script>
<style scoped>
.icon-container {
  margin: 0 2px 0 2px;
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;
}

svg:focus {
  outline: 1px solid transparent;
}
</style>
